﻿@page "/component/common/icon"

<Pager DataSource="Menu">
    <Body>
        <Header1 Divider>
            Icon
            <SubHeader>
                An icon is a glyph used to represent something else
            </SubHeader>
        </Header1>

        <Message>
            All icons come from a complete port of Font Awesome 5.13.0 designed by the FontAwesome team for its standard icon set.
        </Message>

        <PresentationPart Title="Demo">
            <RunTemplate>
                <Icon IconClass="users" />
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Icon IconClass=""users""/>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Spin">
            <Description>An icon can be used as a simple loader.</Description>
            <RunTemplate>
                <Icon IconClass="spinner" Spined />
                <Icon IconClass="user" Spined />
                <Icon IconClass="notched circle" Spined />
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Icon IconClass=""spinner"" Spined />
<Icon IconClass=""user"" Spined />
<Icon IconClass=""notched circle"" Spined />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Fitted">
            <Description>
                An icon can be fitted, without any space to the left or right of it.
            </Description>
            <RunTemplate>
                Tight spacing <Icon IconClass="users" Fitted />  Tight spacing
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
Tight spacing <Icon IconClass=""users"" Fitted/> 人口密度很大
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Link">
            <Description>
                An icon can be formatted as a link
            </Description>
            <RunTemplate>
                <Icon IconClass="home" Linked />
                <Icon IconClass="bus" Linked />
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Icon IconClass=""home"" Linked/>
<Icon IconClass=""bus"" Linked />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Flipped">
            <Description>
                An icon can be flipped
            </Description>
            <RunTemplate>
                <Icon IconClass="cloud" Size="Size.Large" />
                <Icon IconClass="cloud" Flipped Size="Size.Large" />
                <Icon IconClass="home" Size="Size.Large" />
                <Icon IconClass="home" Flipped Size="Size.Large" />
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Icon IconClass=""cloud"" Size=""Size.Large""/>
<Icon IconClass=""cloud"" Flipped Size=""Size.Large"" />
<Icon IconClass=""home"" Size=""Size.Large"" />
<Icon IconClass=""home"" Flipped Size=""Size.Large"" />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Rotated">
            <Description>
                An icon can be rotated
            </Description>
            <RunTemplate>
                <Icon IconClass="home" Size="Size.Large" />
                <Icon IconClass="home" Rotated Size="Size.Large" />
                <Icon IconClass="home" Size="Size.Large" Flipped />
                <Icon IconClass="home" Rotated Size="Size.Large" Flipped />
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Icon IconClass=""home"" Size=""Size.Large"" />
<Icon IconClass=""home"" Rotated Size=""Size.Large"" />
<Icon IconClass=""home"" Size=""Size.Large"" Flipped />
<Icon IconClass=""home"" Rotated Size=""Size.Large"" Flipped />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Circular">
            <Description>
                An icon can be formatted to appear circular
            </Description>
            <RunTemplate>
                <Icon IconClass="user" Circular Size="Size.Large" />
                <Icon IconClass="settings" Circular Size="Size.Large" Color="Color.Red" />
                <Icon IconClass="user" Circular Size="Size.Large" Inverted />
                <Icon IconClass="settings" Circular Size="Size.Large" Color="Color.Red" Inverted />
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Icon IconClass=""user"" Circular Size=""Size.Large"" />
<Icon IconClass=""settings"" Circular Size=""Size.Large"" Color=""Color.Red"" />
<Icon IconClass=""user"" Circular Size=""Size.Large"" Inverted />
<Icon IconClass=""settings"" Circular Size=""Size.Large"" Color=""Color.Red""  Inverted/>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Bordered">
            <Description>
                An icon can be formatted to appear bordered
            </Description>
            <RunTemplate>
                <Icon IconClass="user" Bordered Size="Size.Large" />
                <Icon IconClass="settings" Bordered Size="Size.Large" Color="Color.Red" />
                <Icon IconClass="user" Bordered Size="Size.Large" Inverted />
                <Icon IconClass="settings" Bordered Size="Size.Large" Color="Color.Red" Inverted />
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Icon IconClass=""user"" Bordered Size=""Size.Large"" />
<Icon IconClass=""settings"" Bordered Size=""Size.Large"" Color=""Color.Red"" />
<Icon IconClass=""user"" Bordered Size=""Size.Large"" Inverted />
<Icon IconClass=""settings"" Bordered Size=""Size.Large"" Color=""Color.Red"" Inverted />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Colored">
            <Description>
                An icon can be formatted with different colors
            </Description>
            <RunTemplate>
                <Icon IconClass="users" Color="Color.Red" />
                <Icon IconClass="users" Color="Color.Orange" />
                <Icon IconClass="users" Color="Color.Yellow" />
                <Icon IconClass="users" Color="Color.Green" />
                <Icon IconClass="users" Color="Color.Blue" />
                <Icon IconClass="users" Color="Color.Olive" />
                <Icon IconClass="users" Color="Color.Purple" />
                <Icon IconClass="users" Color="Color.Brown" />
                <Icon IconClass="users" Color="Color.Grey" />
                <Icon IconClass="users" Color="Color.Pink" />
                <Icon IconClass="users" Color="Color.Black" />
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Icon IconClass=""users"" Color=""Color.Red"" />
<Icon IconClass=""users"" Color=""Color.Orange"" />
<Icon IconClass=""users"" Color=""Color.Yellow"" />
<Icon IconClass=""users"" Color=""Color.Green"" />
<Icon IconClass=""users"" Color=""Color.Blue"" />
<Icon IconClass=""users"" Color=""Color.Olive"" />
<Icon IconClass=""users"" Color=""Color.Purple"" />
<Icon IconClass=""users"" Color=""Color.Brown"" />
<Icon IconClass=""users"" Color=""Color.Grey"" />
<Icon IconClass=""users"" Color=""Color.Pink"" />
<Icon IconClass=""users"" Color=""Color.Black"" />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Inverted">
            <Description>
                An icon can have its colors inverted for contrast
            </Description>
            <RunTemplate>
                <Segment Inverted>
                    <Icon IconClass="users" Color="Color.Red" Inverted />
                    <Icon IconClass="users" Color="Color.Orange" Inverted />
                    <Icon IconClass="users" Color="Color.Yellow" Inverted />
                    <Icon IconClass="users" Color="Color.Green" Inverted />
                    <Icon IconClass="users" Color="Color.Blue" Inverted />
                    <Icon IconClass="users" Color="Color.Olive" Inverted />
                    <Icon IconClass="users" Color="Color.Purple" Inverted />
                    <Icon IconClass="users" Color="Color.Brown" Inverted />
                    <Icon IconClass="users" Color="Color.Grey" Inverted />
                    <Icon IconClass="users" Color="Color.Pink" Inverted />
                    <Icon IconClass="users" Color="Color.Black" Inverted />
                </Segment>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Segment Inverted>
<Icon IconClass=""users"" Color=""Color.Red"" Inverted />
<Icon IconClass=""users"" Color=""Color.Orange"" Inverted />
<Icon IconClass=""users"" Color=""Color.Yellow"" Inverted />
<Icon IconClass=""users"" Color=""Color.Green"" Inverted />
<Icon IconClass=""users"" Color=""Color.Blue"" Inverted />
<Icon IconClass=""users"" Color=""Color.Olive"" Inverted />
<Icon IconClass=""users"" Color=""Color.Purple"" Inverted />
<Icon IconClass=""users"" Color=""Color.Brown"" Inverted />
<Icon IconClass=""users"" Color=""Color.Grey"" Inverted />
<Icon IconClass=""users"" Color=""Color.Pink"" Inverted />
<Icon IconClass=""users"" Color=""Color.Black"" Inverted />
</Segment>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Size">
            <Description>
                An icon can vary in size
            </Description>
            <RunTemplate>
                <Icon IconClass="home" Size="Size.Mini" />
                <Icon IconClass="home" Size="Size.Tiny" />
                <Icon IconClass="home" Size="Size.Small" />
                <Icon IconClass="home" />
                <Icon IconClass="home" Size="Size.Large" />
                <Icon IconClass="home" Size="Size.Big" />
                <Icon IconClass="home" Size="Size.Huge" />
                <Icon IconClass="home" Size="Size.Massive" />
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Icon IconClass=""home"" Size=""Size.Mini"" />
<Icon IconClass=""home"" Size=""Size.Tiny"" />
<Icon IconClass=""home"" Size=""Size.Small"" />
<Icon IconClass=""home"" />
<Icon IconClass=""home"" Size=""Size.Large"" />
<Icon IconClass=""home"" Size=""Size.Big"" />
<Icon IconClass=""home"" Size=""Size.Huge"" />
<Icon IconClass=""home"" Size=""Size.Massive"" />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Icons">
            <Description>
                Several icons can be used together as a group
            </Description>
            <RunTemplate>
                <Grid Padded>
                    <GridRow Span="SpanSize.Is2">
                        <GridColumn>
                            <IconGroup Size="Size.Huge">
                                <Icon IconClass="user" />
                                <Icon IconClass="big circle outline" />
                            </IconGroup>
                        </GridColumn>
                        <GridColumn>
                            <IconGroup Size="Size.Huge">
                                <Icon IconClass="dont" Color="Color.Red" Size="Size.Big" />
                                <Icon IconClass="user" Color="Color.Black" />
                            </IconGroup>
                        </GridColumn>

                    </GridRow>
                </Grid>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<IconGroup Size=""Size.Huge"">
    <Icon IconClass=""user"" />
    <Icon IconClass=""big circle outline"" />
</IconGroup>
<IconGroup Size=""Size.Huge"">
    <Icon IconClass=""dont"" Color=""Color.Red"" Size=""Size.Big"" />
    <Icon IconClass=""user"" Color=""Color.Black"" />
</IconGroup>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Corner Icon">
            <Description>
                A group of icons can display a smaller corner icon
            </Description>
            <RunTemplate>
                <IconGroup Size="Size.Huge">
                    <Icon IconClass="users" />
                    <Icon IconClass="add" Cornered="CornerPosition.TopLeft" Color="Color.Red" />
                </IconGroup>
                <IconGroup Size="Size.Huge">
                    <Icon IconClass="users" />
                    <Icon IconClass="add" Cornered="CornerPosition.TopRight" Color="Color.Red" />
                </IconGroup>
                <IconGroup Size="Size.Huge">
                    <Icon IconClass="users" />
                    <Icon IconClass="add" Cornered="CornerPosition.BottomLeft" Color="Color.Red" />
                </IconGroup>
                <IconGroup Size="Size.Huge">
                    <Icon IconClass="users" />
                    <Icon IconClass="add" Cornered="CornerPosition.BottomRight" Color="Color.Red" />
                </IconGroup>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<IconGroup Size=""Size.Huge"">
    <Icon IconClass=""users"" />
    <Icon IconClass=""add"" Cornered=""CornerPosition.TopLeft""  Color=""Color.Red""/>
</IconGroup>
<IconGroup Size=""Size.Huge"">
    <Icon IconClass=""users"" />
    <Icon IconClass=""add"" Cornered=""CornerPosition.TopRight"" Color=""Color.Red""/>
</IconGroup>
<IconGroup Size=""Size.Huge"">
    <Icon IconClass=""users"" />
    <Icon IconClass=""add"" Cornered=""CornerPosition.BottomLeft"" Color=""Color.Red""/>
</IconGroup>
<IconGroup Size=""Size.Huge"">
    <Icon IconClass=""users"" />
    <Icon IconClass=""add"" Cornered=""CornerPosition.BottomRight"" Color=""Color.Red""/>
</IconGroup>
```
")
            </CodeTemplate>
        </PresentationPart>

    </Body>
</Pager>
@code {
    List<string> Menu = new List<string>(new[]{
        "Demo","Spin","Fitted","Link","Flipped","Rotated","Circular","Bordered","Colored","Inverted","Size","Icons","Corner Icon"
    });

}